<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script th:src="@{/static/js/vue.js}"></script>
    <script th:src="@{/static/js/axios.min.js}"></script>
    <script th:src="@{/static/js/index.js}"></script>
<!--    <script th:src="@{/static/js/util.js}"></script>-->
    <link rel="stylesheet" th:href="@{/static/css/index.css}">
    <style scoped>
        /* “Tissue Search”字体样式 */
        .position {
            margin-left: 15px;
            font-size: 30px;
            font-weight: 600;
        }
        /* 图片总布局，样式 */
        .images{
            display: flex;
            margin-top: 20px;
            margin-left: 21px;
            margin-right: 20px;
            flex-wrap: wrap;
        }
        /* 图片之间 */
        .image-middle{
            margin-right: 15px;
            margin-bottom: 15px;
        }
        /* 单张图片样式 */
        .image{
            width:110px;
            height: 110px;
        }
    </style>



</head>
<body>
<div id="app">
    <div>
        <div class="images">
            <div v-for="(item, index) in imageItems" :key="index" class="image-middle">
                <el-card shadow="hover" :body-style="{ padding: '10px' }">

                    <el-popover>
                        <img :src="item.url" slot="reference" class="image"/>
                        <img :src="item.url" class="imagePreview"/>
                    </el-popover>
                    <div style="text-align:center;padding-top:12px">
                        <span>{{item.uid}}</span>
                    </div>
                </el-card>

            </div>
        </div>
    </div>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            imageItems:[]
        },
        methods:{
            getImageList(){
                axios.get(`/album/getImageItems`).then(res=>{
                    this.imageItems=res.data
                    console.log(res)
                })
            }
        },
        created(){
           /* var id = getQueryString("id");
            alert(id)*/
            this.getImageList()
        }
    })
</script>
</body>
</html>